<!--
 * @Descripttion: 库存可视化看板
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-12-24 11:56:12
 * @LastEditors: GW
 * @LastEditTime: 2021-12-30 10:05:05
-->
<template>
    <div class="content-wrapper a-base-container">
        <div class="requisition-set-wrapper">
            <!-- 按钮 -->

            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
                            <div class="btns" @click="sync">
                                <a-icon class="btns-icon" type="sync" />
                                <div class="btns-text">刷新</div>
                            </div>
                        </a-col>
                        <!-- <a-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
                            <div class="btns" v-print="'#printBox'">
                                <a-icon class="btns-icon" type="printer" />
                                <div class="btns-text">打印</div>
                            </div>
                        </a-col> -->
                    </a-col>
                </a-row>
            </div>
            <div class="documents-wrapper" id="documents-wrapper">
                <h3 class="text-center">
                    {{voucherTitle}}
                </h3>
                <a-tabs @change="tabChange">
                    <a-tab-pane key="1" tab="看板查询方案">
                        <div class="note-warpper-inout">

                            <a-row :span="24" :gutter="[16,16]">
                                <a-col :xs="12" :sm="8" :md="8" :lg="6" :xl="4">
                                    <div class="note-add" @click="showItem(1)">
                                        <a-icon type="plus" />
                                    </div>
                                </a-col>
                                <a-col v-for="item in myPlanList" :key="item" :xs="12" :sm="8" :md="8" :lg="6" :xl="4">
                                    <div class="note-item" @dblclick="showItem(2,item)">
                                        <div class="note-title-box ">
                                            <span class="note-title">
                                                {{item.programmeName}}
                                            </span>
                                            <span class="note-option">
                                                <a-icon @click.stop="removeItem(item)" type="close" />
                                            </span>
                                        </div>
                                        <div class="note-content">
                                            <ul class="note-content-li">
                                                <li style="margin-bottom:2px;" v-for="(d,index) in item.data" :key="index">
                                                    <div>{{d.inventoryName}}</div>
                                                </li>
                                            </ul>

                                        </div>
                                        <div class="note-time">
                                            {{item.createDate}}
                                            <span style="float:right;margin-left:10px;color:#1890ff;cursor:pointer" @click="warehouseDisplay(item)">查看看板</span>
                                        </div>
                                    </div>
                                </a-col>
                            </a-row>
                        </div>
                    </a-tab-pane>
                </a-tabs>

            </div>
        </div>

        <div class="flex-tial" v-if="Warehouse_type">
            <div class="warehose_maun">
                <div class="btn margin-left-10" @click="exit_ware">关闭看板</div>
                <div class="btn margin-left-10" v-if="isFullScreen" @click="exitFullscreenExit">还原</div>
                <div class="btn" v-else @click="enterFullscreen">全屏</div>
            </div>
            <div class="warehose_name_title">现存量看板</div>
            <div class="time-text" :style="isFullScreen?bigStyle:''">{{time}}</div>
            <div style="min-height:200px;">
                <a-row>
                    <a-col :span="24">
                        <div class="batch-data-box">
                            <div class="data-title">
                                <div class="item">物料名称</div>
                                <div class="item">物料编码</div>
                                <div class="item">规格型号</div>
                                <div class="item">计量单位</div>
                                <div class="item">安全库存</div>
                                <div class="item">库存量</div>
                                <!-- <div class="item">仓库名称</div> -->
                            </div>
                            <div class="data-list-box" ref="dataListBox">
                                <div class="data-list-mask" @mousemove="scrollMouseOver" @mouseout="scrollMouseOut">
                                </div>
                                <div class="data-list" v-for="item in dataSync" :key="item">
                                    <div class="item">{{item.inventoryName}}</div>
                                    <div class="item">{{item.inventoryCode}}</div>
                                    <div class="item">{{item.inventorySpecification}}</div>
                                    <div class="item">{{item.unitName}}</div>
                                    <div class="item">{{item.safeStorage}}</div>
                                    <div class="item">{{item.inventoryQuantity}}</div>
                                    <!-- <div class="item">{{item.warehouseName}}</div> -->
                                </div>
                            </div>

                        </div>
                    </a-col>
                    <a-col :span="24">
                        <!-- <a-col style="padding:10px;" :span="6" v-for="d in routeData" :key="d">
                            <div class="route-item">
                                <div>工序名称：{{d.workName}}</div>
                                <div>汇 报 数：<span class="item-number">{{d.procedureNum?d.procedureNum:0}}</span></div>
                            </div>
                        </a-col> -->
                        <div class="warehose_picture">
                            <div style="width:100%;">
                                <v-chart ref="registers_creditChart" :options="options" :auto-resize='true' theme='walden' :style="{width:'100%'}" />
                            </div>
                        </div>
                    </a-col>
                </a-row>
            </div>
        </div>

        <div class="loading-wrapper" v-show="loading">
            <a-spin class="loading-content" tip="加载中..." />
        </div>

        <drag-modal title="新增看板方案" :visible="inventoryVisible" @cancel="cancel" @ok="saveItem" :width="1000">
            <div class="from-wrapper-spectculars">
                <div class="from-name"> 方案名称：</div>
                <div class="from-input">
                    <a-input v-model.trim="saveAsName"></a-input>
                </div>
            </div>
            <div class="clearfix">
                <div style="width:45%;float:left">
                    已选中 {{initNumber}} 项,总共 {{tableDataLength}} 项
                    <u-table ref="plTable" row-key="id" @select="selectInit" :big-data-checkbox="checked" height="500" use-virtual showBodyOverflow="title" showHeaderOverflow="title" :row-height="rowHeight" border>
                        <u-table-column type="selection" width="40" />
                        <!-- <u-table-column type="index" label="序号" width="60" fixed /> -->
                        <u-table-column v-for="item in columns" :key="item.id" :resizable="item.resizable" :show-overflow-tooltip="item.showOverflow" :prop="item.prop" :label="item.label" :fixed="item.fixed" :width="item.width" />
                    </u-table>
                </div>
                <div class="shuttle-btn">
                    <div>
                        <a-icon type="forward" @click="forward" />
                    </div>
                    <div>
                        <a-icon type="backward" @click="backward" />
                    </div>
                </div>
                <div style="width:45%;float:left">
                    总共 {{checkNumber}} 项
                    <u-table ref="plTableCheck" row-key="id" @select="selectCheck" :big-data-checkbox="checked" height="500" use-virtual showBodyOverflow="title" showHeaderOverflow="title" :row-height="rowHeight" border>
                        <u-table-column type="selection" width="40" />
                        <!-- <u-table-column type="index" label="序号" width="60" fixed /> -->
                        <u-table-column v-for="item in columns" :key="item.id" :resizable="item.resizable" :show-overflow-tooltip="item.showOverflow" :prop="item.prop" :label="item.label" :fixed="item.fixed" :width="item.width" />
                    </u-table>
                </div>
            </div>

            <template slot="footer">
                <div>
                    <a-button type="primary" @click="saveItem">保存</a-button>
                    <a-button @click="cancel" class="margin-left-10">关闭</a-button>
                    <!-- <a-button @click="allSelection" class="margin-left-10">全选</a-button>
                    <a-button @click="clearSelection" class="margin-left-10">取消</a-button>
                    <a-button @click="toggleSelection([tableData[0], tableData[2]])">切换第一、第三行的选中状态</a-button>
                    <a-button @click="toggleSelection([tableData[3]], '固定选中')">选中第四行</a-button>
                    <a-button @click="getCheckboxRecords" class="margin-left-10">获取选中的值</a-button> -->

                </div>
            </template>
        </drag-modal>
    </div>

</template>
<script>
import { list as listInventory } from "@/api/inventory/inventory"; //获取物料数据
import { save, remove, myplan } from '@/api/erp/reportProgramme';

import { getAction } from "@/api/manage";
import { projectSituation, patchSituation, getBatchApi } from '@/api/sale/areaCalculation';
import { boardApi } from '@/api/inventory/inout';
import walden from '@/utils/echarts/theme/walden'
export default {
    components: {
        'v-chart': VueECharts,
    },
    data () {
        return {
            inventoryVisible: false,
            saveAsName: null,
            checked: true,
            columns: [
                { label: "物料编码", prop: "inventoryCode", id: "inventoryCode", width: 110, },
                { label: "物料名称", prop: "inventoryName", id: "inventoryName", width: 160, fixed: true, },
                { label: "规格型号", prop: "inventorySpecification", id: "inventorySpecification", width: 110 },
                // { label: "物料分类", prop: "inventoryClassName", id: "inventoryClassName", width: 180, ellipsis: true },
                // { label: "存货分类", prop: "inventoryCategoryName", id: "inventoryCategoryName", width: 80, ellipsis: true },
                // { label: "计价方式", prop: "pricingMethod", id: "pricingMethod", width: 120 },
                // { label: "计量单位", prop: "unitName", id: "unitName", scopedSlots: { customRender: "unitName" }, width: 80 },
                // { label: "计量单位组", prop: "unitGroupName", id: "unitGroupName", width: 120 },
                // { label: "主计量单位", prop: "mainUnitName", id: "mainUnitName", width: 120 },
                // { label: "物料属性", prop: "inventoryAttribute", id: "inventoryAttribute", width: 300, ellipsis: true },
            ],

            columnsBatchData: [
                { dataIndex: 'batch', title: '批次' },
                { dataIndex: 'customerOrderNumber', title: '客户订单号' },
                { dataIndex: 'cumExecuteQuantity', title: '累积执行数量' },
                { dataIndex: 'processRouteName', title: '工艺路线名称' },
                { dataIndex: 'projectCode', title: '项目编码' },
                { dataIndex: 'projectName', title: '项目名称' },
                { dataIndex: 'voucherCode', title: '单据编码' },
                { dataIndex: 'voucherDate', title: '单据日期' },
                { dataIndex: 'totalQuantity', title: '总数量' },
            ],

            columnsProject: [{
                dataIndex: 'number',
                title: '序号',
                align: 'center',
                customRender: (text, record, index) => {
                    return index + 1;
                }
            },
            { dataIndex: 'projectName', title: '项目名称' },
            { dataIndex: 'projectCode', title: '项目编码' },
            { dataIndex: 'batchNum', title: '当前所有批次数量' },
            { dataIndex: 'batchStr', title: '所有批次' },
            { dataIndex: 'cumCompletedQuantity', title: '累积完成数量' },
            { dataIndex: 'liablePersonNames', title: '负责人' },
            { dataIndex: 'planBeginDate', title: '计划开始日期' },
            { dataIndex: 'planEndDate', title: '计划完成日期' },
            {
                dataIndex: 'projectStatus', title: '项目状态', customRender: (text, record, index) => {
                    return text == 0 ? '未开始' : text == 1 ? '进行中' : text == 2 ? '已完成' : text == 3 ? '已归档' : '';
                }
            },
            {
                dataIndex: '', title: '操作', scopedSlots: { customRender: 'operation' }, width: 120, align: 'center',
            }
            ],
            dataBatch: [],//批次统计数据
            projectId: null,
            projectName: null,
            projectSelect: [],
            activeKey: 1,
            expandedRowKeys: [],
            Warehouse_type: false,
            dataList: [], // 看板数据
            dataRecord: '',
            intervalId: null,
            dataSync: [],
            routeData: [],  //工序数据
            routeDataXAxis: [], //柱状图横坐标
            routeDataNum: [],   //柱状图数据
            options: {},//生产情况
            optionsInOut: {},//出入库

            outNum: 0,//入库数量
            inNum: 0,//出库数量
            loading: false,
            isFullScreen: false,//是否是全屏显示
            bigStyle: {
                'margin-top': '60px'
            },//全屏时候的样式
            time: '',//时间
            timeOut: null,


            height: 0,
            rowHeight: 55, // 如果你这里给行高为50，那么你表格行会出现错乱，不要问为啥，因为你可以看看控制台看节点的高是多少，是55，而你这里给50就有问题！
            tableData: [],
            selectRows: [],//方案选中的物料
            reportCode: 'inventory_board',
            myPlanList: [],//方案列表
            planActiveId: null,//当前方案id
            inventoryQuantityArray: [],//库存量
            availableQuantityArray: [],//安全库存
            timeRun: false,
            checkSubmitData: [],//确定保存方案的物料
            initNumber: 0,
            checkNumber: 0,//确认选中项
            checkSelectData: [],//确认选中的数据
            maxLength: 30,//最多选中多少条数据展示
            timeScroll: null,
            tableDataLength: 0,//左侧总条数
        };
    },
    watch: {
        inventoryQuantityArray (newValue, oldValue) {
            this.inventoryQuantityArray = newValue;
            this.orgOptions() //监听到了，重新定义数据，即重绘
        },
        availableQuantityArray (newValue) {
            this.availableQuantityArray = newValue;
            this.orgOptions() //监听到了，重新定义数据，即重绘
        },
        // selectRows (newValue) {
        //     //勾选的物料
        //     this.initNumber = newValue.length;
        // },
        checkSubmitData (newValue) {
            //确认提交生成图表的物料
            this.checkNumber = newValue.length;
        }
    },
    created () {
        // this.dataRefreh();
        this.getData();//获取全部物料明细
        this.getList();
    },
    computed: {
        voucherTitle: function () {
            return this.$route.meta.name;
        }
    },
    destroyed () {
        this.clear();
    },
    mounted () {
        this.orgOptions();//柱状图
    },
    methods: {
        walden,
        forward () {
            //确定物料
            // 设置选中的物料数据
            this.selectRows = [];
            let check = this.$refs.plTable.getCheckboxRecords();
            if (this.checkNumber + check.length > this.maxLength) {
                this.$message.warning(`最多只能选择 ${this.maxLength} 个物料`);
                return;
            }
            console.log(this.checkSubmitData, check);
            this.checkSubmitData.push(...check);
            this.$refs.plTableCheck.reloadData(this.checkSubmitData);
            //删除左侧物料
            let map = new Map();
            this.checkSubmitData.forEach(m => {
                map.set(m.id, m);
            });
            this.tableData = this.tableData.filter(item => !map.has(item.id));
            this.$refs.plTable.reloadData(this.tableData);
            this.tableDataLength = this.tableData.length;
            this.initNumber = 0;
        },
        backward () {
            //取消物料
            //删除右侧物料
            let map = new Map();
            let check = this.$refs.plTableCheck.getCheckboxRecords();
            this.tableData.push(...check);
            this.$refs.plTable.reloadData(this.tableData);
            this.tableDataLength = this.tableData.length;
            this.initNumber = 0;
            this.checkSelectData.forEach(m => {
                map.set(m.id, m);
            });
            this.checkSubmitData = this.checkSubmitData.filter(item => !map.has(item.id));
            this.$refs.plTableCheck.reloadData(this.checkSubmitData);

            this.$refs.plTable.reloadData(this.tableData);
        },
        getScroll () {
            //看板列表滚动
            let dom = this.$refs.dataListBox;
            let boxHeight = dom.clientHeight;//容器高度
            let height = dom.scrollHeight;//滚动条高度
            this.timeScroll = setInterval(() => {
                dom.scrollTop += 1;
                if (dom.scrollTop >= height - boxHeight) {
                    console.log(dom.scrollTop >= height, '进来了')
                    dom.scrollTop = 0;
                }
            }, 100)
        },
        scrollMouseOver () {
            console.log('移入');
            clearInterval(this.timeScroll);
        },
        scrollMouseOut () {
            console.log('移出');
            if (this.dataSync.length > 7) {
                this.getScroll();
            }
        },
        getData () {
            //获取所有物料
            let params = {
                current: 1,
                size: -1,
            };
            listInventory(params).then((res) => {
                if (res.code == 200) {
                    this.$nextTick(() => {
                        this.tableData = res.data.records;
                        this.tableData.forEach(item => {
                            item.key = item.id;
                            let attribute = [];
                            if (item.isPurchasing) {
                                attribute.push('允许外购');
                            }
                            if (item.isForSale) {
                                attribute.push('允许销售');
                            }
                            if (item.isMadeSelf) {
                                attribute.push('允许自制');
                            }
                            if (item.isMaterial) {
                                attribute.push('允许生产耗用');
                            }
                            if (item.isLaborCost) {
                                attribute.push('允许劳务费用');
                            }
                            if (item.isSuite) {
                                attribute.push('允许成套件');
                            }
                            if (item.isMadeRequest) {
                                attribute.push('允许委外');
                            }
                            if (item.isInventedKey) {
                                attribute.push('允许虚拟件');
                            }
                            item.inventoryAttribute = attribute.join('，')
                        });
                    })
                } else {
                    // this.$message.warning(res.message);
                }
            });
        },
        saveItem () {
            //新增看板方案
            let name = this.saveAsName;
            if (name == null || name == '') {
                this.$message.warning('请输入方案名称', 1);
                return;
            } else if (this.checkSubmitData.length == 0) {
                this.$message.warning('请选择需要查看的物料', 1);
                return;
            } else {
                let newArray = this.checkSubmitData.map(res => {
                    let { id, inventoryName, inventoryCode, inventorySpecification } = res;
                    return { id, inventoryName, inventoryCode, inventorySpecification }
                })
                let requestData = {
                    id: null,
                    programmeName: name,//方案名称
                    programmeJson: JSON.stringify(newArray),   //方案json
                    reportCode: this.reportCode,
                }

                if (this.planActiveId != null) {
                    requestData.id = this.planActiveId
                }
                save(requestData).then((res) => {
                    if (res.code == 200) {
                        if (this.planActiveId != null) {
                            this.$message.success('方案修改成功', 1);
                        } else {
                            this.$message.success('方案保存成功', 1)

                        }
                        this.getList();
                        this.clearSelection();//取消选中
                        this.inventoryVisible = false;
                    }
                }).catch((e) => {
                    // this.$message.error('请求出错', 1)
                })
            }
        },
        getList () {
            //获取看板方案
            myplan({ reportCode: this.reportCode }).then((res) => {
                if (res.code == 200) {
                    console.log(res);
                    res.data.forEach(item => {
                        item.data = JSON.parse(item.programmeJson);
                    });
                    this.myPlanList = res.data;
                }
            }).catch((e) => {
                // this.$message.error('请求出错', 1)
            })
        },
        removeItem (item) {
            //删除看板方案
            let _this = this;
            this.$confirm({
                title: "提示",
                content: (
                    <span>
                        是否确认删除{item.programmeName}?
                    </span>
                ),
                onOk () {
                    remove({ id: item.id }).then((response) => {
                        if (response.code === 200) {
                            _this.$message.success('删除方案成功');
                            _this.getList();
                        } else {
                            // _this.$message.warning(response.message);
                        }
                    }).catch((e) => {
                        // _this.$message.error('请求出错', 1)
                    })
                },
                onCancel () { },
            });
        },
        showItem (type, item) {
            //开启弹窗
            this.inventoryVisible = true;
            this.getData();
            if (type == 1) {
                //新增
                this.planActiveId = null;
                this.saveAsName = null;
                this.selectRows = [];
                this.checkSubmitData = [];
                this.initNumber = 0;
            } else {
                //修改
                this.planActiveId = item.id;
                this.saveAsName = item.programmeName;
                this.selectRows = JSON.parse(item.programmeJson);
                this.initNumber = 0;
                console.log('选中的数据：', this.selectRows, this.tableData)
            }

            this.$nextTick(() => {
                // 设置表格数据
                if (type == 1) {
                    this.$refs.plTable.reloadData(this.tableData);
                    this.$refs.plTableCheck.reloadData(this.checkSubmitData);
                }
                if (type == 2) {
                    console.log(this.selectRows);
                    let map = new Map();
                    this.selectRows.forEach(m => {
                        map.set(m.id, m);
                    });
                    this.tableData = this.tableData.filter(item => !map.has(item.id));
                    this.$refs.plTable.reloadData(this.tableData);

                    this.tableDataLength = this.tableData.length;
                    //修改
                    this.checkSubmitData = this.selectRows;
                    this.$refs.plTableCheck.reloadData(this.checkSubmitData);
                }

            })
        },
        cancel () {
            //关闭弹窗
            this.inventoryVisible = false;
            this.clearSelection();//取消选中
        },
        selectCheck (rows) {
            //右侧选中的物料
            this.checkSelectData = rows;
        },
        allSelection () {
            this.$refs.plTable.toggleAllSelection()
        },
        clearSelection () {
            this.$refs.plTable.clearSelection()
        },
        // 获取复选框选中的行
        getCheckboxRecords () {
            let array = [];
            array = this.$refs.plTable.getCheckboxRecords();
            return array;
        },
        // 适用于多量的数据选中
        partRowSelections (rows) {
            // data是数据，state是选中还是取消选中
            let data = rows;
            this.$nextTick(() => {
                this.$refs.plTable.partRowSelections(data, true)
            })
        },
        selectInit (rows, keys) {
            //初始物料数据的选择
            this.selectRows = rows;
            this.initNumber = rows.length;
        },
        toggleSelection (rows, type) {
            let data = [...rows];
            console.log(data)
            if (data) {
                data.forEach(row => {
                    // 注意： 勾选方法与element不同哦
                    // this.$refs.plTable.toggleRowSelection(row); // element表格是这样写的
                    // 我们得这样写

                    // 如果是固定选中
                    if (type === '固定选中') {
                        // toggleRowSelection方法参数不懂得去看文档api哦
                        this.$refs.plTable.toggleRowSelection([
                            {
                                row: row,
                                selected: row.selected,
                            }
                        ])
                        // 下面这是切换选中
                    } else {
                        this.$refs.plTable.toggleRowSelection([
                            {
                                row: row
                            }
                        ])
                    }
                });
            } else {
                this.$refs.plTable.clearSelection();
            }
        },
        orgOptions () {
            //库存情况
            this.options = {
                title: {
                    text: '库存情况',
                    textStyle: {
                        color: '#19D0D8',
                    },
                    x: 'center',
                    top: 0,
                },
                tooltip: {
                    show: true,
                },
                legend: {
                    data: ['库存量', '安全库存'],
                    top: 30,
                },
                // dataZoom: [{
                //     type: 'slider',
                //     show: true,
                //     xAxisIndex: [0],
                //     left: '9%',
                //     bottom: 0,
                //     start: 10,
                //     end: 45 //初始化滚动条
                // }],
                xAxis: [{
                    name: '物料名称',
                    type: 'category',
                    axisLabel: {
                        interval: 0,//标签显示间隔
                        // rotate: 20,//标签倾斜度数
                    },
                    grid: {
                        let: '10%',//距离左边
                        bottom: '40%',//距离下边
                    },
                    data: this.routeDataXAxis,
                    nameTextStyle: {
                        fontWeight: 'bold',
                        color: '#19D0D8',
                        fontSize: 14,
                    }
                }],
                yAxis: [{
                    name: '数量',
                    nameTextStyle: {
                        fontWeight: 'bold',
                        color: '#19D0D8',
                        fontSize: 14,
                    },
                    // min: 10,
                    // interval: 1,
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}',
                        textStyle: {
                            color: '#19D0D8',
                            fontSize: 14,
                        }
                    }
                }],
                series: [{
                    name: "库存量",
                    type: "bar",
                    barWidth: '20',
                    data: this.inventoryQuantityArray,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color: 'rgba(231, 122, 14)',
                                    fontSize: 16
                                }
                            }
                        }
                    },
                    // showBackground:true,
                    // backgroundStyle:{
                    //     color: 'rgba(180, 180, 180, 0.2)'
                    // }
                }, {
                    name: "安全库存",
                    type: "bar",
                    barWidth: '20',
                    data: this.availableQuantityArray,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color: 'rgba(231, 122, 14)',
                                    fontSize: 16
                                }
                            }
                        }
                    },
                    // showBackground:true,
                    // backgroundStyle:{
                    //     color: 'rgba(180, 180, 180, 0.2)'
                    // }
                }]
            }
        },
        // 看板显示
        warehouseDisplay (record) {

            this.showtime();
            this.dataRecord = record;
            // console.log(record, this.routeData)
            let data = JSON.parse(record.programmeJson)
            let ids = [];
            data.forEach(item => {
                ids.push(item.id);
            });
            let requestData = { inventoryIds: ids.join(',') };

            // if (record && record.id) {
            //     this.loading = true;//加载中
            //     this.Warehouse_type = false;
            //     // this.showtime();//显示时间
            //     this.timeOut = setInterval(this.showtime, 1000);
            //     console.log('获取工艺路线')
            //     this.getRoute('', record)
            // }

            if (!this.timeRun) {
                this.timeRun = true;
                this.timeOut = setInterval(this.showtime, 1000);
                setTimeout(() => {
                    if (this.dataSync.length > 7) {
                        console.log(this.dataSync)
                        this.getScroll();
                    }
                }, 1500)
            }
            this.dataRefreh();
            boardApi(requestData).then(response => {
                if (response.code === 200) {
                    this.loading = false;
                    this.Warehouse_type = true;//显示看板
                    let xArray = [];
                    let quantityNum = [];
                    let availableNum = [];
                    response.data.forEach(item => {
                        xArray.push(item.inventoryName)
                        quantityNum.push(item.inventoryQuantity);
                        availableNum.push(item.safeStorage);
                    });
                    this.routeDataXAxis = xArray;

                    this.inventoryQuantityArray = quantityNum;//库存量
                    this.availableQuantityArray = availableNum;//安全库存

                    this.dataSync = response.data;//现存量数据
                } else {
                    // this.$message.warning(response.message);
                }
            })
        },
        showtime () {
            var date = new Date();//创建一个日期对象的实例,new代表创建，Date是一个时间对象，连起来就是创建对象，并用变量date接收，实例就是一个实实在在的东西
            // console.log(date);//在控制台输出date的值
            var year = date.getFullYear();
            var month = date.getMonth() + 1;//这里系统定义的月份是从0到11定义的，而加一的目的就是让它变成从1到12，这样就可以实现正常的月份了
            var day = date.getDate();
            var hour = date.getHours();
            if (hour < 10) {
                hour = '0' + hour;
            }//这里用if语句的原因是当我们的时间走到一位数字时就会出现闪动，会使整个代码混乱，为了解决这一缺点在个位数前面用拼接的方法加一个0，这样就形成了两位数，这样就不会出现闪动。分钟和秒也是一样
            var minute = date.getMinutes();
            if (minute < 10) {
                minute = '0' + minute;
            }
            var second = date.getSeconds();
            if (second < 10) {
                second = '0' + second;
            }
            this.time = year + '年' + month + '月' + day + '日  ' + hour + ':' + minute + ':' + second;

        },
        tailList (val) {
            console.log(val)
            getAction('erp/processRoute/getDetailList', { 'id': val.id }).then(response => {
                console.log(response)
            })
        },

        // 定时器
        dataRefreh () {
            let _this = this;
            // 计时器正在进行中，退出函数
            if (this.intervalId != null) {
                return;
            }
            // 计时器为空，操作
            this.intervalId = setInterval(() => {
                this.warehouseDisplay(_this.dataRecord)
            }, 2000);
        },

        // 停止定时器
        clear () {
            clearInterval(this.intervalId); //清除计时器
            this.intervalId = null; //设置为null
            this.routeData = [];
            clearTimeout(this.timeOut);
            this.timeOut = null;
            this.timeRun = false;
            this.timeScroll = null;
            clearInterval(this.timeScroll);//清除滚动
        },

        enterFullscreen () {
            this.isFullScreen = true;
            //全屏
            let docElm = document.documentElement;
            //W3C
            // if (docElm.requestFullscreen) {
            //     docElm.requestFullscreen();
            // }
            //FireFox
            if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
            }
            //Chrome等
            else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
            }
            //IE11
            else if (docElm.msRequestFullscreen) {
                docElm.msRequestFullscreen();
            }
        },
        exitFullscreenExit () {
            this.isFullScreen = false;
            //退出全屏
            //W3C
            // if (document.exitFullscreen) {
            //     document.exitFullscreen();
            // }
            //FireFox
            if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            }
            //Chrome等
            else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            }
            //IE11
            else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        },

        // 关闭看板
        exit_ware () {
            this.Warehouse_type = false;
            this.exitFullscreenExit();
            this.clear();
        },
        sync () {
            this.activeKey = 1;
            this.dataBatch = [];
            this.expandedRowKeys = [];
        }
    },
};
</script>
<style lang="less">
    @import '~@/style/purchase/voucher.less';
    .choice-project {
        width: 300px;
        margin-top: 10px;
        text-align: right;
        margin-bottom: 10px;
        display: flex;
        line-height: 36px;
        .choice-item {
            flex: 1;
        }
        .choice-item:nth-child(1) {
            flex: 0 0 50px;
        }
    }

    // 看板样式

    .flex-tial {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 47, 71);
        // background: #fff;
        padding: 10px;
        z-index: 1;
        .batch-data-box {
            margin-top: 10px;
            color: #19d0d8;
            border: 1px solid #19d0d8;
            letter-spacing: 1px;
            line-height: 46px;
            padding: 0px 10px;
            .data-title {
                display: flex;
                border-bottom: 1px solid #19d0d8;
                .item {
                    flex: 1;
                    padding: 0 10px;
                }
            }
            .data-list-box {
                height: 324px;
                overflow-y: scroll;
                .data-list-mask {
                    position: absolute;
                    z-index: 800;
                    width: 99%;
                    height: 324px;
                    background: rgba(0, 0, 0, 0);
                }
            }
            .data-list {
                display: flex;
                .item {
                    flex: 1;
                    padding: 0 10px;
                    border: none;
                    font-size: 16px;
                    font-weight: bold;
                    color: rgba(231, 122, 14);
                }
            }
        }
        .time-text {
            color: #19d0d8;
            font-size: 18px;
            text-align: right;
            padding-right: 10px;
            font-weight: bold;
        }
        .route-item {
            div {
                line-height: 32px;
            }
            border: 1px solid #19d0d8;
            padding: 5px;
            color: #19d0d8;
            font-size: 14px;
        }
        .item-number {
            font-size: 18px;
            font-weight: bold;
            color: rgba(231, 122, 14);
        }
        .ant-table-tbody > tr > td,
        .ant-table-header th {
            color: #19d0d8 !important;
        }
        .ant-table-thead > tr > th {
            color: #19d0d8 !important;
            background: rgba(0, 0, 0, 0);
        }
        div::-webkit-scrollbar {
            display: none;
        }
    }
    .warehose_maun {
        display: flex;
        flex-direction: row-reverse;
        height: 32px;
        .btn {
            cursor: pointer;
            height: 32px;
            color: #19d0d8;
            border: 1px solid #19d0d8;
        }
    }

    .warehose_list {
        max-height: 300px;
        min-height: 200px;
        overflow: scroll;
        border: 1px solid #cacaca;
    }

    .warehose_name_title {
        width: 100%;
        text-align: center;
        color: #19d0d8;
        height: 40px;
        line-height: 40px;
        margin-bottom: 10px;
        font-size: 25px;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .warehose_picture {
        display: flex;
        padding: 10px;
        padding-top: 30px;
    }

    .warehose_top {
        display: flex;
        .warehose_lit {
            width: 30%;
            border: 1px solid #cacaca;
            text-align: center;
        }
    }

    .note-warpper-inout {
        padding: 10px;
        .note-add {
            width: 100%;
            height: 260px;
            line-height: 260px;
            font-size: 60px;
            color: #888;
            box-shadow: 0px 0px 5px #ccc;
            text-align: center;
            text-align: center;
            cursor: pointer;
        }
        .note-item {
            box-shadow: 0px 0px 5px #ccc;
            height: 260px;
            border-radius: 4px;
            .note-title-box {
                height: 30px;
                line-height: 30px;
                padding-left: 5px;
                overflow: hidden;
                border-bottom: 1px solid #eee;
                display: flex;
                .note-title {
                    width: 70%;
                    flex: 0 0 70%;
                    overflow: hidden;
                }
                .note-option {
                    flex: 0 0 30%;
                    overflow: hidden;
                    float: right;
                    text-align: right;
                    padding-right: 5px;
                    cursor: pointer;
                }
            }
            .note-content {
                height: 200px;
                padding: 5px;
                overflow-y: auto;
            }
            .note-content-li {
                list-style: none;
                padding: 0px;
            }
            .note-time {
                padding-left: 10px;
                height: 30px;
                line-height: 30px;
                padding-right: 5px;
                text-align: left;
                border-top: 1px solid #eee;
            }
        }
        .note-item:hover {
            box-shadow: 0px 0px 5px rgb(248, 100, 100);
        }
    }
    .from-wrapper-spectculars {
        display: flex;
        width: 320px;
        line-height: 32px;
        margin-bottom: 20px;
        .from-name {
            flex: 0 0 70px;
        }
        .from-input {
            flex: 1;
        }
    }
    .shuttle-btn {
        width: 10%;
        margin-top: 20%;
        float: left;
        text-align: center;
        font-size: 36px;
    }
</style>
